// 侧边导航页面
<template>
  <el-container class="dashboard-container">
    <el-aside width="200px" class="sidebar Desktop">
      <div class="logo">博客后台</div>
      <el-menu
        router
        :default-active="$route.path"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <el-menu-item index="/articles">
          <i class="el-icon-document"></i>
          <span slot="title">文章管理</span>
        </el-menu-item>
        <el-menu-item index="/categories">
          <i class="el-icon-collection"></i>
          <span slot="title">分类管理</span>
        </el-menu-item>
        <el-menu-item index="/comments">
          <i class="el-icon-chat-dot-round"></i>
          <span slot="title">评论管理</span>
        </el-menu-item>
        <el-menu-item index="/notes">
          <i class="el-icon-notebook-2"></i>
          <span slot="title">笔记管理</span>
        </el-menu-item>
        <el-menu-item index="/projects">
          <i class="el-icon-folder-opened"></i>
          <span slot="title">项目管理</span>
        </el-menu-item>
        <!-- AnnexPages -->
        <el-menu-item index="/annexPages">
          <i class="el-icon-folder-opened"></i>
          <span slot="title">附件</span>
        </el-menu-item>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header class="header">
        <div>
          <!-- 抽屉按钮 -->
          <el-button
            @click="drawer = true"
            round
            style="margin-left: 16px"
            icon="el-icon-more"
            class="Mobile"
          >
          </el-button>
          <!-- 抽屉 -->
          <el-drawer
            title="我是标题"
            :visible.sync="drawer"
            :with-header="false"
            class="Mobile"
          >
            <el-aside width="100%" class="sidebar" style="height: 100%">
              <div class="logo">博客后台</div>
              <el-menu
                router
                :default-active="$route.path"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b"
              >
                <el-menu-item index="/articles">
                  <i class="el-icon-document"></i>
                  <span slot="title">文章管理</span>
                </el-menu-item>
                <el-menu-item index="/categories">
                  <i class="el-icon-collection"></i>
                  <span slot="title">分类管理</span>
                </el-menu-item>
                <el-menu-item index="/comments">
                  <i class="el-icon-chat-dot-round"></i>
                  <span slot="title">评论管理</span>
                </el-menu-item>
                <el-menu-item index="/notes">
                  <i class="el-icon-notebook-2"></i>
                  <span slot="title">笔记管理</span>
                </el-menu-item>
                <el-menu-item index="/projects">
                  <i class="el-icon-folder-opened"></i>
                  <span slot="title">项目管理</span>
                </el-menu-item>
              </el-menu>
            </el-aside>
          </el-drawer>
        </div>

        <div class="user-info">
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              <i class="el-icon-user"></i> 管理员
            </span>
            <el-dropdown-menu slot="dropdown">
              <!-- <el-dropdown-item>个人中心</el-dropdown-item> -->
              <el-dropdown-item command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>

      <el-main>
        <router-view> </router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import axios from "axios";
export default {
  name: "DashboardLayout",
  data() {
    return {
      drawer: false,
    };
  },
  methods: {
    handleCommand(command) {
      console.log(123);
      if (command === "logout") {
        axios
          .post("http://127.0.0.1:3000/api/logout")
          .then(() => {
            if (confirm("确定退出登录吗？")) {
              localStorage.removeItem("token"); // 清除 token
              this.$message.success("退出成功");
              this.$router.push("/login");
            } else {
              this.$message.error("ok");
            }
          })
          .catch(() => {
            console.log("退出成功");
          });
      }
    },
  },
};
</script>

<style scoped>
.dashboard-container {
  height: 100vh;
  overflow: auto;
  background-color: #f5f7fa;
}

.sidebar {
  background: linear-gradient(180deg, #304156 0%, #1f2d3d 100%);
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}

.logo {
  height: 64px;
  line-height: 64px;
  text-align: center;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 1px;
  background-color: rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.el-menu {
  border-right: none;
}

.header {
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 64px;
}

.user-info {
  margin-right: 20px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #606266;
  display: flex;
  align-items: center;
}

.el-dropdown-link i {
  margin-right: 8px;
  font-size: 18px;
}

.el-main {
  padding: 20px;
  background-color: #f5f7fa;
}
.Mobile {
  display: none;
}
.Desktop {
  display: block;
}
/* 适配移动端 */
@media (max-width: 600px) {
  .Mobile {
    display: block;
  }
  .Desktop {
    display: none;
  }
}
/* 默认隐藏 */
/* .NowwantYouToHide {
  display: none;
} */

/* 适配移动端显示 */
/* @media (max-width: 600px) {
  .NowwantYouToHide {
    display: block;
  }
} */
</style>
